<template>
    <v-app id="inspire">
        <!-- 左侧导航栏 -->
        <v-navigation-drawer v-model="drawer" app>
            <!-- 左侧logo区域 -->
            <v-list-item>
                <v-list-item-content>
                    <v-list-item-title class="text-h6">
                        测试平台
                    </v-list-item-title>
                    <v-list-item-subtitle>
                        霍格沃兹
                    </v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>

            <v-divider></v-divider>

            <!-- 导航抽屉 -->
            <v-list dense nav>
                <v-list-item v-for="item in items" :key="item.title" link :href="item.link">
                    <!-- 菜单icon -->
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <!-- 菜单内容 -->
                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <!-- 顶部栏 -->
        <v-app-bar app>
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>测试平台</v-toolbar-title>
            <!-- 占满剩余空间 -->
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="layout">退出</v-btn>
        </v-app-bar>

        <v-main>
            <!-- 主题内容区域 -->
            <router-view></router-view>
        </v-main>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            drawer: null,
            items: [
                { title: '测试用例', icon: 'mdi-book', link: '#/index/testcase' },
                { title: '测试计划', icon: 'mdi-target', link: '#/index/plan' },
                { title: '测试记录', icon: 'mdi-format-list-numbered-rtl', link: '#/index/record' },
            ],
        }
    },
    methods: {
        // 退出
        layout() {
            localStorage.removeItem('token')
            this.$router.push('/user')
        }
    }
}
</script>